<template>
	<view class="">
		<view class="card-section">
			<view class="acea-row row-middle">
				<image class="image" :src="userInfo.avatar"></image>
				<view class="text">
					<view class="name">{{userInfo.nickname}}</view>
					<view v-if="userInfo.memberType===2">永久VIP会员</view>
					<view v-else-if="userInfo.memberType===1">VIP会员 剩余{{userInfo.total - userInfo.usedCount}}次</view>
					<view v-else>您与{{userInfo.shopName}}的第 {{userInfo.registerDays}} 天</view>
				</view>
			</view>
			<view class="acea-row row-between-wrapper info">
				<view v-if="userInfo.memberType===1">时尚打卡新地标
					<!-- <text class="num">猫咪-羊驼-安哥拉巨兔-科尔鸭</text> -->
				</view>
				<view v-else>开通即享会员权益</view>
				<view class="btn" @click="scrollToCard">{{userInfo.memberType===1 ? '续费会员' : '开通会员'}}</view>
			</view>
		</view>
		<view class="right-section">
			<view class="section-hd acea-row row-center-wrapper">
				<view class="title acea-row row-center row-bottom"><text class="iconfont icon-huiyuan2"></text>SVIP会员尊享权</view>
			</view>
			<view class="section-bd acea-row row-between-wrapper">
				<view v-for="item in memberRights" :key="item.id" class="acea-row row-middle item">
					<image class="image" :src="item.image"></image>
					<view class="text">
						<view class="name">{{item.title}}</view>
						<view>{{item.remark}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="type-section" id="card">
			<view class="title">
				<view class="bold">{{userInfo.memberType===1 ? '续费会员' : '开通会员'}}</view>
				<view v-if="userInfo.memberType===1">会员卡剩余<text class="time">{{userInfo.total - userInfo.usedCount}}次</text></view>
			</view>
			<scroll-view class="scroll" scroll-x="true">
				<view v-for="item in memberType" :key="item.id" class="item" :class="{on: item.id === svip.id}" @click="checkType(item)">
					<view>{{item.cardName}}</view>
					<view class="new">￥<text class="num">{{item.salePrice}}</text></view>
					<view v-if="parseFloat(item.salePrice) === 0" class="info">试用{{item.total}}次</view>
					<view v-else-if="item.cartType === 100" class="info">永久会员</view>
					<view v-else class="old">￥{{item.smarketPrice}}</view>
				</view>
			</scroll-view>
			<view v-if="memberExplain" class="agree">
				<navigator class="link" url="/pages/annex/vip_clause/index" hover-class="none">购买即视为同意《<text class="mark">会员用户协议</text>》</navigator>
			</view>
			<view class="buy" @click="pay">立即支付</view>
			<view class="cash">
				<!-- <text @click="drawMemberCard">点击兑换卡</text> -->
			</view>
		</view>

		<view :class="{ mask: popupShow }" @touchmove.prevent></view>
		<view class="popup" :class="{ on: popupShow }">
			<view class="cont">
				<view class="title">
					<view class="line"></view>
					<view class="name">激活会员卡</view>
					<view class="line"></view>
				</view>
				<form class="form" @submit="checkForm">
					<input v-model="account" class="input" name="account" type="text" placeholder="请输入卡号" placeholder-style="color:#C49D89" />
					<input v-model="password" class="input" name="password" type="text" placeholder="请输入卡密" placeholder-style="color:#C49D89"
					 password />
					<button class="button" form-type="submit">确认激活</button>
				</form>
			</view>
			<tui-icon class="iconfont" name="close" color="#ffffff" :size="28" :unit="rpx" @click="closePopup"></tui-icon>
			<!-- <button class="iconfont icon-guanbi2" @click="closePopup"></button> -->
		</view>
		<payment :payMode="payMode" :pay_close="pay_close" :is-call="true" @onChangeFun="onChangeFun" :order_id="pay_order_id"
		 :totalPrice="totalPrice"></payment>
		<view v-show="false" v-html="formContent"></view>
	</view>
</template>

<script>
	import payment from '@/components/payment';
	import {
		mapGetters
	} from "vuex";
	import {
		getMemberCard
	} from '@/api/user.js';

	import {
		memberCardCreate,
		memberCardReceived
	} from '@/api/order.js';

	export default {
		components: {
			payment
		},
		filters: {
			// dateFormat: function(value) {
			// 	return dayjs(value * 1000).format('YYYY-MM-DD');
			// },
			// moneyFormat: function(value) {
			// 	return parseFloat(value);
			// }
		},
		data() {
			return {
				memberType: [],
				memberRights: [],
				memberExplain: [],
				memberCoupons: [],
				popupShow: false,
				account: '',
				password: '',
				pay_order_id: '',
				payMode: [
					// {
					// 		"name": "微信支付",
					// 		"icon": "wechat",
					// 		"color": "#09bb07",
					// 		value: 'weixin',
					// 		title: '微信快捷支付',
					// 		payStatus: 1,
					// 	},
					// 	{
					// 		"name": "支付宝支付",
					// 		"icon": "alipay",
					// 		"color": "#00aaea",
					// 		value: 'alipay',
					// 		title: '支付宝支付',
					// 		payStatus: 1,
					// 	},
					// 	{
					// 		"name": "余额支付",
					// 		"icon": "wallet",
					// 		"color": "#eb6623",
					// 		"number":100,
					// 		value: 'yue',
					// 		title: '可用余额:',
					// 		payStatus: 1,
					// 	},
					{
						"name": "线下支付",
						"icon": "bankcard",
						"color": "#ff9900",
						value: 'offline',
						title: '线下支付',
						payStatus: 1,
					}
				],
				pay_close: false,
				totalPrice: '0',
				formContent: '',
				page: 1,
				// #ifdef H5
				isWeixin: true,
				// #endif
				svip: null
			}
		},
		watch: {
			popupShow: {
				immediate: true,
				handler() {
					this.account = '';
					this.password = '';
				}
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo'])
		},
		onShow: function() {
			if (this.isLogin) {
				this.memberCard();
			} else {
				this.login();
			}
		},
		methods: {
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			pay() {
				if (parseFloat(this.svip.salePrice) === 0) { //体验卡
					this.createMemberCard();
				} else {
					this.pay_close = true;
				}
			},
			scrollToCard() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#card').boundingClientRect(data => {
					uni.pageScrollTo({
						scrollTop: data.top
					});
				}).exec();
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${id}`
				});
			},
			// 付费会员数据
			memberCard() {
				uni.showLoading({
					title: '正在加载…'
				});
				getMemberCard().then(res => {
					uni.hideLoading();
					const {
						rights,
						cards
					} = res.data;
					this.memberRights = rights;
					this.memberType = cards;
					// this.memberCoupons = member_coupons;
					// this.memberExplain = member_explain;
					this.memberType = this.memberType.filter(item => !item.use);
					this.totalPrice = this.memberType[0].salePrice;
					this.svip = this.memberType[0];
					// memberOverdueTime({
					// 	member_type: this.svip.limitType,
					// 	total: this.svip.total
					// }).then(res => {
					// 	this.memberEndTime = res.data.data;
					// });
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
			},

			checkType(svip) {
				this.svip = svip;
				this.totalPrice = svip.salePrice
				// memberOverdueTime({
				// 	member_type: svip.type,
				// 	vip_day: svip.vip_day
				// }).then(res => {
				// 	this.memberEndTime = res.data.data;
				// });
			},
			closePopup() {
				this.popupShow = false;
			},
			getMemberCard() {
				getMemberCard().then(res => {
					let data = res.data;
					this.memberType = data.cards;
					this.memberRights = data.rights;
				}).catch(err => {

				});
			},
			memberSelect(index) {
				this.memberSelected = index;
			},
			// 卡密兑换
			drawMemberCard() {
				let data = {
					member_card_code: '',
					member_card_pwd: '',
					from: 'weixinh5'
				};
				if (!this.popupShow) {
					return this.popupShow = true;
				}
				if (!this.account) {
					return uni.showToast({
						title: '请输入卡号',
						icon: 'none'
					});
				}
				if (!this.password) {
					return uni.showToast({
						title: '请输入卡密',
						icon: 'none'
					});
				}

				// #ifdef H5
				let ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					data.from = 'weixin'
				}
				// #endif
				// #ifdef MP
				data.from = 'routine';
				// #endif
				uni.showLoading({
					title: '激活中'
				});
				// #ifdef MP
				memberCardReceived(data).then(res => {
					uni.showToast({
						title: res.msg,
						success() {
							this.popupShow = false;
							this.getMemberCard();
						}
					});
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
				// #endif
			},
			// 立即购买
			createMemberCard() {
				uni.showLoading({
					title: '正在加载…'
				});
				let query = {
					payType: 0,
					memberType: parseFloat(this.svip.salePrice) > 0 ? 1 : 0,
					orderType: 2,
					channel: 0,
					cardId: this.svip.id,
					payPrice: this.svip.salePrice,
					activate: 0
				};
				memberCardCreate(query).then(res => {
					if (parseFloat(this.svip.salePrice) > 0) {
						this.callPay(res);
					} else {
						uni.hideLoading();
						uni.showToast({
							title: '成功开启0元试用',
						});
					}
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
			},
			// 调用支付
			callPay(data) {
				let {
					payType,
					orderId,
					params
				} = data.data;
				//0 线下 1 小程序 2 公众号 3 H5 4 PC 5 支付宝 6 余额
				switch (payType) {
					case -1:
						uni.hideLoading();
						// uni.showToast({
						// 	title: data.msg,
						// 	duration: 2000,
						// 	success
						// })

						setTimeout(function() {
							uni.redirectTo({
								url: '/pages/member/vip/index',
							})
						}, 2000);

						break;
					case 0:
						uni.hideLoading();
						this.$util.Tips({
							title: data.msg,
							icon: 'success'
						}, {
							tab: 5,
							url: '/pages/member/vip/result'
						});
						break;
					case 1:
						uni.requestPayment({
							timeStamp: params.timestamp,
							nonceStr: params.nonceStr,
							package: params.package,
							signType: params.signType,
							paySign: params.paySign,
							success: function(res) {
								uni.showToast({
									title: '支付成功',
									icon: 'success'
								});
								setTimeout(function() {
									uni.redirectTo({
										url: '/pages/member/vip/index',
									})
								}, 2000);

							},
							fail: function() {
								uni.showToast({
									title: '取消支付',
									icon: 'none'
								});
							},
							complete: function() {
								uni.hideLoading();
							}
						});
						break;
				}
			},
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			payClose: function() {
				this.pay_close = false;
			},
			payCheck: function() {
				this.createMemberCard();
			},
			// 激活
			checkForm(e) {
				let formData = e.detail.value,
					data = {
						member_card_code: '',
						member_card_pwd: '',
						from: 'H5 '
					};
				if (!formData.account) {
					return uni.showToast({
						title: '请输入卡号',
						icon: 'none'
					});
				}
				if (!formData.password) {
					return uni.showToast({
						title: '请输入卡密',
						icon: 'none'
					});
				}
				data.member_card_code = formData.account;
				data.member_card_pwd = formData.password;
				// #ifdef H5
				let ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					data.from = 'weixin';
				}
				// #endif
				// #ifdef MP
				data.from = 'routine';
				// #endif
				uni.showLoading({
					title: '激活中'
				});
				memberCardReceived(data).then(res => {
					let that = this;
					uni.showToast({
						title: res.msg,
						success() {
							that.popupShow = false;
						}
					});
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.acea-row {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap
	}

	.acea-row.row-middle {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center
	}

	.acea-row.row-top {
		-webkit-box-align: start;
		-moz-box-align: start;
		-o-box-align: start;
		-ms-flex-align: start;
		-webkit-align-items: flex-start;
		align-items: flex-start
	}

	.acea-row.row-bottom {
		-webkit-box-align: end;
		-moz-box-align: end;
		-o-box-align: end;
		-ms-flex-align: end;
		-webkit-align-items: flex-end;
		align-items: flex-end
	}

	.acea-row.row-center {
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-o-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center
	}

	.acea-row.row-right {
		-webkit-box-pack: end;
		-moz-box-pack: end;
		-o-box-pack: end;
		-ms-flex-pack: end;
		-webkit-justify-content: flex-end;
		justify-content: flex-end
	}

	.acea-row.row-left {
		-webkit-box-pack: start;
		-moz-box-pack: start;
		-o-box-pack: start;
		-ms-flex-pack: start;
		-webkit-justify-content: flex-start;
		justify-content: flex-start
	}

	.acea-row.row-between {
		-webkit-box-pack: justify;
		-moz-box-pack: justify;
		-o-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between
	}

	.acea-row.row-around {
		justify-content: space-around;
		-webkit-justify-content: space-around
	}

	.acea-row.row-column-around {
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		justify-content: space-around;
		-webkit-justify-content: space-around
	}

	.acea-row.row-column {
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-o-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column
	}

	.acea-row.row-column-between {
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-o-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: justify;
		-moz-box-pack: justify;
		-o-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between
	}

	.acea-row.row-center-wrapper {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-o-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center
	}

	.acea-row.row-between-wrapper {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: justify;
		-moz-box-pack: justify;
		-o-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		opacity: .5;
		z-index: 5
	}

	.card-section {
		height: 328rpx;
		padding: 88rpx 66rpx 0;
		background: #FFFFFF url("") center/100% 100% no-repeat;

		.image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		.text {
			flex: 1;
			margin-left: 15rpx;
			font-size: 22rpx;
			line-height: 30rpx;
			color: #89735B;
		}

		.name {
			margin-bottom: 2rpx;
			font-weight: bold;
			font-size: 30rpx;
			line-height: 42rpx;
			color: #333333;
		}

		.info {
			margin-top: 74rpx;
			font-size: 24rpx;
			color: #AE5A2A;
		}

		.num {
			font-size: 36rpx;
		}

		.btn {
			width: 146rpx;
			height: 44rpx;
			border-radius: 22rpx;
			background-color: #FFFFFF;
			line-height: 44rpx;
			text-align: center;
		}
	}

	.right-section {
		background-color: #FFFFFF;

		.section-hd {
			padding-top: 34rpx;
			padding-bottom: 34rpx;

			.title {
				width: 543rpx;
				height: 90rpx;
				background: url("") center/cover no-repeat;
				font-weight: bold;
				font-size: 34rpx;
				line-height: 1.1;
				color: #89735B;
			}

			.iconfont {
				font-size: 34rpx;
				color: #89735B;
			}
		}

		.section-bd {
			padding: 0 30rpx 15rpx;

			.item {
				width: 338rpx;
				height: 140rpx;
				padding-left: 30rpx;
				border-radius: 6rpx;
				margin-bottom: 14rpx;
				background-color: #F7F7F7;
			}

			.image {
				width: 80rpx;
				height: 80rpx;
			}

			.text {
				flex: 1;
				min-width: 0;
				margin-left: 22rpx;
				overflow: hidden;
				white-space: nowrap;
				font-size: 24rpx;
				line-height: 33rpx;
				color: #9A856D;
			}

			.name {
				margin-bottom: 2rpx;
				font-size: 26rpx;
				line-height: 37rpx;
				color: #333333;
			}
		}
	}

	.type-section {
		margin-top: 20rpx;
		background-color: #FFFFFF;

		.title {
			padding: 26rpx 30rpx 0;
			font-size: 24rpx;
			color: #797979;

			.bold {
				display: inline-block;
				margin-right: 14rpx;
				font-weight: bold;
				font-size: 32rpx;
				line-height: 45rpx;
				color: #333333;

				+view {
					display: inline-block;
				}
			}

			.time {
				margin-left: 14rpx;
				font-size: 24rpx;
				color: #AE5A2A;
			}
		}

		.scroll {
			white-space: nowrap;
		}

		.item {
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 210rpx;
			height: 232rpx;
			border-radius: 12rpx;
			margin: 32rpx 30rpx 30rpx 0;
			box-shadow: 0 3rpx 30rpx rgba(0, 0, 0, 0.1);
			font-size: 30rpx;
			line-height: 42rpx;
			color: #754E19;

			&:first-child {
				margin-left: 30rpx;
			}

			&.on {
				border: 3rpx solid #FCC282;
				background-color: #FEF7EC;
			}
		}

		.new {
			margin-top: 22rpx;
			font-weight: 600;
			font-size: 34rpx;

			.num {
				font-size: 48rpx;
				line-height: 48rpx;
			}
		}

		.old {
			margin-top: 13rpx;
			text-decoration: line-through;
			font-size: 24rpx;
		}

		.info {
			margin-top: 13rpx;
			font-size: 24rpx;
		}

		.agree {
			font-size: 22rpx;
			text-align: center;
			color: #797979;

			.link {
				display: inline-block;
			}

			.mark {
				color: #AE5A2A;
			}
		}

		.buy {
			height: 80rpx;
			border-radius: 12rpx;
			margin: 30rpx 30rpx 0;
			background: linear-gradient(90deg, #FEE2B7 0%, #FDC383 100%);
			font-size: 30rpx;
			line-height: 80rpx;
			text-align: center;
			color: #5D3324;
		}

		.cash {
			padding-top: 26rpx;
			padding-bottom: 29rpx;
			font-size: 28rpx;
			text-align: center;
			color: #754E19;
		}
	}

	.coupon-section {
		margin-top: 20rpx;
		background-color: #FFFFFF;

		.section-hd {
			padding: 26rpx 30rpx 0;

			.title {
				font-weight: bold;
				font-size: 32rpx;
				line-height: 45rpx;
				color: #333333;
			}

			.link {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #89735B;

				.iconfont {
					margin-left: 6rpx;
					font-size: 14rpx;
				}
			}
		}

		.section-bd {
			white-space: nowrap;

			.item {
				display: inline-flex;
				width: 360rpx;
				height: 148rpx;
				margin: 26rpx 20rpx 30rpx 0;
				background: url("") center/cover no-repeat;

				&:first-child {
					margin-left: 30rpx;
				}

				&:last-child {
					margin-right: 30rpx;
				}

				&.gray {
					background-image: url("");

					.btn {
						color: #9F9F9F;
					}

					.money {
						color: #fff;

						.num {
							color: #fff;
						}
					}

					.name {
						color: #fff;
					}

					.text {
						color: #9F9F9F;
					}

					.mark {
						color: #A8A8A8;
					}
				}

				.btn {
					width: 52rpx;
					padding-right: 14rpx;
					padding-left: 14rpx;
					white-space: pre-wrap;
					font-size: 24rpx;
					color: #5D3324;
				}

				.text {
					max-width: 194rpx;
					margin-left: 14rpx;
				}

				.name {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: bold;
					font-size: 28rpx;
					line-height: 40rpx;
					color: #5D3324;
				}

				.mark {
					display: inline-block;
					height: 35rpx;
					padding-right: 14rpx;
					padding-left: 14rpx;
					border-radius: 19rpx;
					margin-top: 6rpx;
					background-color: rgba(255, 255, 255, 0.3);
					font-size: 22rpx;
					line-height: 35rpx;
					color: #5F3426;
				}

				.money {
					max-width: 170rpx;
					text-align: center;
					font-size: 30rpx;
					font-weight: 800;
				}

				.num {
					position: relative;
					font-size: 54rpx;
					color: #333333;
				}
			}
		}
	}

	.goods-section {
		margin-top: 20rpx;
		background-color: #FFFFFF;

		.section-hd {
			padding: 26rpx 30rpx 0;
			font-weight: bold;
			font-size: 32rpx;
			line-height: 45rpx;
			color: #333333;
		}

		.section-bd {
			padding: 0 30rpx 0 7rpx;
			margin-top: 26rpx;

			.item {
				width: 215rpx;
				padding-bottom: 24rpx;
				margin-left: 23rpx;
			}

			.image {
				width: 215rpx;
				height: 215rpx;
				border-radius: 6rpx;
			}

			.name {
				margin-top: 10rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 26rpx;
				line-height: 37rpx;
				color: #333333;
			}

			.svip-price {
				margin-top: 6rpx;
				font-size: 26rpx;
				color: #333333;

				image {
					width: 60rpx;
					height: 24rpx;
					margin-left: 6rpx;
				}
			}

			.shop-price {
				margin-top: 4rpx;
				font-size: 20rpx;
				color: #999999;
			}
		}
	}

	.popup {
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 10;
		width: 600rpx;
		height: 634rpx;
		padding: 60rpx 40rpx 0;
		margin-top: -79rpx;
		background: url("") center/100% 100% no-repeat;
		transform: translate(-50%, -50%) scale(0);
		transition: 0.3s;

		&.on {
			transform: translate(-50%, -50%) scale(1);
		}

		.cont {
			padding: 20rpx;
		}

		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 45rpx;
			padding-bottom: 45rpx;

			.line {
				width: 70rpx;
				height: 2rpx;
				background-color: #E6C3A5;
			}

			.name {
				margin-right: 25rpx;
				margin-left: 25rpx;
				font-size: 40rpx;
				color: #89735B;
			}
		}

		.form {
			.input {
				padding-right: 50rpx;
				padding-left: 50rpx;
				height: 98rpx;
				border-radius: 12rpx;
				margin-bottom: 35rpx;
				background: rgba(255, 187, 129, 0.15);
				font-size: 30rpx;
			}

			.button {
				height: 72rpx;
				border-radius: 36rpx;
				margin: 45rpx 80rpx 20rpx;
				background: #353841;
				font-size: 32rpx;
				line-height: 72rpx;
				color: #FFFFFF;
			}
		}

		.image {
			position: absolute;
			top: -57rpx;
			left: 50%;
			width: 146rpx;
			height: 114rpx;
			transform: translateX(-50%);
		}

		.iconfont {
			position: absolute;
			bottom: -110rpx;
			left: 50%;
			background: none;
			transform: translateX(-50%);

		}
	}
</style>
